<template>
    <div class="container">
        <div class="main">
            <div class="pay-title">
                支付总金额 <span class="pay-price">￥ {{ payData.price }}</span>
            </div>
            <div class="pay-main">
                <h4>微信支付</h4>
                <el-row
                    type="flex"
                    justify="space-between"
                    align="middle"
                    class="pay-qrcode"
                >
                    <div class="qrcode">
                        <!-- 二维码 -->
                        <canvas ref="qrcodeCanvas"></canvas>
                        <p>请使用微信扫一扫</p>
                        <p>扫描二维码支付</p>
                    </div>
                    <div class="pay-example">
                        <img
                            src="http://157.122.54.189:9093/images/wx-sweep2.jpg"
                            alt=""
                        />
                    </div>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    import QRcode from "qrcode";
    export default {
        // 页面进入就发请求, 获取订单下部戏
        data() {
            return {
                payData: {},
                timer: null
            };
        },
        watch: {
            "$store.state.userstore.userInfo.token": {
                handler: function () {
                    console.log(this.$store.state.userstore.userInfo.token);
                    if (this.$store.state.userstore.userInfo.token) {
                        this.$axios({
                            url: "/airorders/" + this.$route.query.id,
                            headers: {
                                Authorization:
                                    "Bearer " +
                                    this.$store.state.userstore.userInfo.token,
                            },
                        }).then((res) => {
                            console.log(res.data);
                            this.payData = res.data;

                            // 这个库传入两个参数
                            // 1. canvas dom
                            // 2. 字符串

                            QRcode.toCanvas(
                                this.$refs.qrcodeCanvas,
                                this.payData.payInfo.code_url,
                                {
                                    width: 200,
                                    color: {
                                        dark: "#00f",
                                        light: "#fbb",
                                    },
                                }
                            );

                            // 一旦生成二维码就可以开始询问支付结果,
                            // 首先我们不管轮询逻辑, 只发起一次请求
                            this.checkPay()
                        });
                    }
                },
                immediate: true,
            },
        },
        methods: {
            checkPay() {
                console.log('调用 checkpay 检查支付状态');
                this.$axios({
                    method: "post",
                    url: "/airorders/checkpay",
                    data: {
                        id: this.payData.id,
                        nonce_str: this.payData.price,
                        out_trade_no: this.payData.orderNo,
                    },
                    headers: {
                        Authorization:
                            "Bearer " + this.$store.state.userstore.userInfo.token,
                    },
                }).then((res) => {
                    console.log(res.data);
                    if (res.data.trade_state !== "SUCCESS") {
                        this.timer = setTimeout(() => {
                            this.checkPay()
                        }, 3000);
                    }else {
                        this.$message.success('支付完成')
                    }
                });
            },
        },
        destroyed() {
            // 这跟 created / mounted 一样都是一个生命周期
            // 在销毁组件的时候触发, 
            // 可以讲不能带到别的页面的东西在这里一并销毁即可
            // 这时候页面跳出, 需要清理定时器
            // 避免轮询无法停止
            console.log('跳出页面, 定时器被清理了');
            clearTimeout(this.timer)
        }
    };
</script>

<style scoped lang="less">
    .container {
        background: #f5f5f5;
        padding: 30px 0;

        .main {
            width: 1000px;
            margin: 0 auto;

            .pay-title {
                text-align: right;
                span {
                    font-size: 28px;
                    color: orangered;
                }
            }

            .pay-main {
                background: #fff;
                margin-top: 10px;
                border-top: 5px orange solid;
                padding: 30px;

                h4 {
                    font-size: 28px;
                    font-weight: normal;
                    margin-bottom: 10px;
                }

                .pay-qrcode {
                    padding: 0 80px;
                }

                .qrcode {
                    border: 1px #ddd solid;
                    padding: 15px;
                    height: fit-content;

                    #qrcode-stage {
                        width: 200px;
                        height: 200px;
                        margin-bottom: 10px;
                    }

                    p {
                        line-height: 2;
                        text-align: center;
                    }
                }
            }
        }
    }
</style>